@extends('home.layouts')
@section('content')
    <link rel="stylesheet" type="text/css" href="{{asset('assets/uploadifive/uploadifive.css')}}">
    <style>
        #tip-queue {
            border: 1px solid #E5E5E5;
            height: 177px;
            overflow: auto;
            margin-bottom: 10px;
            padding: 0 3px 3px;
            width: 300px;
        }
        .uploadifive-button{border:none; border-radius:1px; height: 28px;margin: auto;margin-top: 10px;background:#3bb4f2;color:#fff;}
    </style>
    <div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-1">
        <div class="am-modal-dialog">
            <div class="am-modal-hd"><span id="commentTitle">修改签名/简介</span>
                <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
            </div>
            <input type="hidden" name="cid" value="">
            <div class="am-modal-bd">
                <div class="am-form-group">
                    <textarea class="descTextarea" rows="5" style="width:100%" id="doc-ta-1" style="border: beige;"></textarea>
                </div>
                <a class="am-btn am-btn-xs am-btn-danger" style="float: left;margin-left: 15%;" data-am-modal-close>取消</a>
                <button class="am-btn am-btn-xs am-btn-primary" style="float: right;margin-right: 15%;" onclick="postDesc()">提交</button>
            </div>
        </div>
    </div>

    <div class="am-modal am-modal-prompt" tabindex="-1" id="my-prompt">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">修改昵称</div>
            <div class="am-modal-bd">
                <input type="text" class="am-modal-prompt-input" id="nickname">
            </div>
            <div class="am-modal-footer">
                <span class="am-modal-btn" data-am-modal-cancel>取消</span>
                <span class="am-modal-btn" data-am-modal-confirm>提交</span>
            </div>
        </div>
    </div>
    <div class="pet_content pet_content_list" style="padding-top: 0">
        <div class="pet_grzx">

            <div class="pet_grzx_nr">
                <div class="pet_grzx_ico">
                    <img src="
                    @if(Session::get('user')['avatar'])
                            {{Session::get('user')['avatar']}}-200X200
                            @else
                    {{asset('assets/images/avatar.png')}}
                            @endif
                            " alt="" id="shoAvatar">
                </div>
                <div class="pet_grzx_map">
                    <input id="file_upload" type="file" name="cover" />
                    <div id="tip-queue" class="col-xs-4" style="display: none"></div>
                </div>
                <div class="pet_grzx_name" id="doc-prompt-toggle">{{Session::get('user')['username']}}</div>
                <div class="pet_grzx_num_font" onclick="modifyDesc(this)" data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0, width: 330, height: 245}">
                    @if(Session::get('user')['describe'])
                    {{Session::get('user')['describe']}}
                        @else
                        点击添加签名/简介
                        @endif
                </div>
                <div class="pet_grzx_num">
                    <span><a href="{{url('starai/1')}}">{{$starNum}}<i>收藏</i></a></span>
                    <span><a href="{{url('attention')}}">{{$guanNum}}<i>关注</i></a></span>
                    <span>
                        @if(!Session::get('user')['is_author'])
                        0<i onclick="mess()">我的发布</i>
                        @else
                            <a href="{{url('userarticle/1')}}">
                                {{$ainum}}
                                <i>我的发布</i>
                            </a>
                            @endif
                    </span>
                </div>
            </div>

            <div class="pet_content_main">
            <div data-am-widget="list_news" class="am-list-news am-list-news-default" >
                <div class="am-list-news-bd">
                    <ul class="am-list">
                        @foreach($replyComments as $m)
                        <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-right pet_list_one_block">
                            <div class="pet_list_one_info">
                                <div class="pet_list_one_info">
                                    <div class="pet_list_one_info_l">
                                        <div class="pet_list_one_info_ico"><img src="
                                        @if(empty($m['avatar']))
                                            {{asset('assets/images/home/a1.png')}}
                                            @else
                                            {{$m['avatar']}}-40X40
                                                    @endif
                                                    " alt=""></div>
                                        <div class="pet_list_one_info_name">
                                                {{$m['username']}}
                                        </div>
                                        <small> &nbsp;&nbsp;{{date('Y-m-d H:i:s',$m['created_at'])}}</small>
                                    </div>
                                </div>
                                <div class=" am-u-sm-12 am-list-main pet_list_one_nr">
                                    <a href="javascript:;" onclick="read({{$m['id']}},{{$m['cid']}},{{$m['type']}})" style="color: black">
                                    <small class="am-list-item-hd pet_list_one_bt">
                                        在 <code>《{{mb_substr($m['title'],0,16,'utf-8')}}》</code>回复：
                                    </small>
                                    <h4 class="am-list-item-hd">
                                        {{$m['comment']}}
                                    </h4>
                                    </a>
                                </div>
                            </div>
                        </li>
                            @endforeach
                    </ul>
                </div>
            </div>
            </div>

@endsection

@section('javascript')
    <script type="text/javascript" src="{{asset('assets/uploadifive/jquery.uploadifive.js')}}"></script>
    <script>
        function read(id,cid,type){
            $.post('{{url('read')}}',{'_token':'{{csrf_token()}}','id':id},function(res){
                if(res.status){
                    if(type==1){
                        location.href='{{url('articledetail')}}/'+cid;
                    }else if(type==2){
                        location.href='{{url('imagedetail')}}/'+cid;
                    }
                }
            });
        }
        $(function(){
            $('#doc-prompt-toggle').on('click', function() {
                $('#my-prompt').modal({
                    relatedTarget: this,
                    onConfirm: function(e) {
                        var postData={'_token':'{{csrf_token()}}','username': e.data};
                        $.post('{{url('modifyuser')}}',postData,function(res){
                            if(res.status){
                                $('#doc-prompt-toggle').text(e.data);
                            }
                            layer.msg(res.msg);
                        });
                    },
                    onCancel: function(e) {
                    }
                });
            });

            $('#file_upload').uploadifive({
                'formData'     : {
                    '_token'     : "{{csrf_token()}}"
                },
                'uploadScript' : "{{asset('uploadimg')}}",
                'multi':false,
                'buttonText'   : '更换头像',   //按钮显示文字
                'queueID'      : 'tip-queue', //提示信息放置目标
                'fileType'     : 'image/*',   //允许上传文件类型
                'onSelect': function (file) {
                    layer.load(1);
                },
                'onUploadComplete': function(file,data,response){
                    layer.closeAll('loading');
                    data= $.parseJSON(data);
                    if(!data.status){
                        alert(data.msg);
                    }else{
                        layer.msg('图片上传完毕');
                        $("#shoAvatar").attr('src',data.msg+'-200X200');
                        $.post('{{url('setavatar')}}',{"_token":'{{csrf_token()}}','avatar':data.msg}, function (res) {
                            layer.msg(res.msg);
                        });
                    }

                }
            });
        });
        function mess(){
            layer.alert('您不是作者，请用电脑访问 {{url('application')}} 申请成为作者');
        }

        function modifyDesc(obj){
            var desc= $.trim($(obj).text());
            $(".descTextarea").text(desc);
        }

        function postDesc(){
            var postData={'_token':'{{csrf_token()}}','describe':$(".descTextarea").val()};
            $.post('{{url('modifyuser')}}',postData,function(res){
                if(res.status){
                    $('.pet_grzx_num_font').text(postData.describe);
                    $('#doc-modal-1').modal('close');
                }
                layer.msg(res.msg);
            });
        }
    </script>
@endsection